import React, { PureComponent } from 'react'
import { setTitle, scale, tooltip, mapLineStyle, mapEffectStyle } from './util/common'
import echarts from 'echarts'
import geoJson from '../../util/world'
import baseChart from './base-chart'
import { connect } from 'react-redux'
/**
 * 世界发货
 *
 * */
class Map extends PureComponent {
    constructor () {
        super()
    }

    shouldComponentUpdate (nextProps) {
        return nextProps.worldOrder !== this.props.worldOrder
    }

    renderDate = (worldOrder) => {
        return {
            series: [{
                data: worldOrder.toJS().map((w, i) => {
                    return {
                        name: 'area',
                        value: [w.longitude, w.latitude],
                        fromName: w.from,
                        toName: w.area,
                        num: w.quantity,
                        itemStyle: {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / 5 * i))
                            }
                        }

                    }
                })
            }, {
                data: worldOrder.toJS().map((w, i) => {
                    return {
                        fromName: w.from,
                        toName: w.area,
                        coords: [
                            [120.19, 30.26],
                            [w.longitude, w.latitude]
                        ],
                        lineStyle: {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / 5 * i))
                            }
                        }
                    }
                })
            }, {
                data: worldOrder.toJS().map((w, i) => {
                    return {
                        fromName: w.from,
                        toName: w.area,
                        coords: [
                            [120.19, 30.26],
                            [w.longitude, w.latitude]
                        ],
                        lineStyle: {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / 5 * i))
                            }
                        }
                    }
                })
            }]
        }
    }

    componentWillUpdate (nextProps) {
        const data = this.renderDate(nextProps.worldOrder)
        this.myChart.setOption(data)
    }

    componentDidMount () {
        const {setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart))
        echarts.registerMap('北京市', geoJson)
        const data = this.renderDate(this.props.worldOrder)
        const option = {
            grid: {
                left: '5%',
                right: '5%',
                top: '5%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                ...tooltip
            },
            geo: {
                map: 'world',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: 'transparent',
                        borderColor: '#fff',
                        borderWidth: .2 * scale
                    },
                    emphasis: {
                        areaColor: 'transparent',
                        borderColor: '#fff',
                        borderWidth: .2 * scale
                    }
                }
            },

            series: [{
                name: '地点',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'fill'
                },
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false
                    }
                },
                symbolSize: function (val) {
                    return 1 * scale
                },
                itemStyle: {
                    normal: {
                        color: '#5A94DF'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `${params.data.toName}:${params.data.num}`
                    }
                },
                data: []
            }, {
                name: '线路',
                type: 'lines',
                coordinateSystem: 'geo',
                zlevel: 2,
                large: true,
                // effect: {
                //     ...mapEffectStyle
                // },
                lineStyle: {
                    ...mapLineStyle
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `${params.data.fromName}-${params.data.toName}`
                    }
                },
                data: []
            },
                {
                    name: '线路',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 10,
                    large: true,
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.data.fromName}-${params.data.toName}`
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 0,
                            curveness: 0.2,
                        }
                    },
                    effect: {
                        constantSpeed: 20,
                        show: true,
                        trailLength: 0.1 * scale,
                        symbolSize: 3* scale,
                        curveness: 0.2,
                    },
                    data: []// data.moveLines
                },
            ]
        }
        this.myChart.setOption(option)
        this.myChart.setOption(data)
    }

    render () {
        return (
            <div style={{width: '100%', height: '100%'}} ref="chart"/>
        )
    }

}

function mapStoreToProps ({worldOrder}) {
    return {worldOrder}
}

export default baseChart(connect(mapStoreToProps)(Map))